<script setup lang="ts">
defineProps<{
  title: string
  time: string
  content: string
}>()
</script>

<template>
  <div class="w-full flex flex-col">
    <div class="list-title flex items-end text-[#C0E7FF]">
      <div class="max-w-6/10 overflow-hidden text-ellipsis whitespace-nowrap">
        {{ title }}
      </div>
      <div class="ml-auto text-sm">
        {{ time }}
      </div>
    </div>
    <div class="line-clamp-2 text-ellipsis px-3 indent text-[#17E6FF] line-height-relaxed">
      {{ content }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list-title {
  background: url('./item-ten-list-title.png') no-repeat;
  background-size: 100% 100%;
  background-position: left top;
  padding: 30px 12px 15px 12px;
  position: relative;
  &:before {
    content: '';
    display: block;
    width: 18px;
    height: 8px;
    background: url('./item-ten-list-title-icon.png') no-repeat;
    background-size: cover;
    position: absolute;
    left: 12px;
    top: 15px;
  }
}
</style>
